<template>
  <div class="tw-libmodal">
    <div class="tw-libmodal-box">
      <div class="tw-libmodal-headeer"></div>
      <div class="tw-libmodal-body">
        <slot></slot>
      </div>
      <div class="tw-libmodal-footer">
        <a class="tw-libmodal-btn xyes"></a>
        <a class="tw-libmodal-btn xno"></a>
      </div>
    </div>
  </div>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'tw-libmodal',

  mixins: [style],

  props,

  computed: {
    style () {
      return {
        color: this.color
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root.tw-libname {
          color: ${this.color};
        }
      `

      this.addStyle(style)
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
